<template>
  <div class="page-manager-list">
    <div class="header">
      <el-button @click="handleAddBefore">添加管理员</el-button>

      <el-button @click="fetchData">
        <el-icon><Refresh /></el-icon>
      </el-button>
    </div>

    <el-table :data="displayTableData">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="adminname" label="账号名"></el-table-column>
      <el-table-column prop="role" label="角色">
        <template #default="{ row }">
          <el-tag type="success">
            {{ row.role === 1 ? "管理员" : "超级管理员" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="handleEdit(row)">编辑</el-button>
          <el-button @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="footer">
      <!-- 分页 -->
      <el-pagination
        background
        layout="total, prev, pager, next"
        v-model:current-page="page"
        :page-size="pageSize"
        :total="tableData.length"
      />
    </div>

    <!-- 抽屉 -->
    <el-drawer v-model="showDrawer">
      <template #default>
        <el-form ref="formRef" :model="formData" :rules="formRules">
          <el-form-item label="账号" prop="adminname">
            <el-input
              v-model="formData.adminname"
              :disabled="handleType === 2"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              v-model="formData.password"
              :disabled="handleType === 2"
            />
          </el-form-item>

          <el-form-item label="角色" prop="role">
            <el-select v-model="formData.role">
              <el-option value="1" label="管理员" />
              <el-option value="2" label="超级管理员" />
            </el-select>
          </el-form-item>

          <el-form-item label="权限" prop="checkedKeys">
            <!-- tree 的勾选数据，需要通过方法去主动获取 -->
            <el-tree
              ref="treeRef"
              :data="treeData"
              node-key="name"
              show-checkbox
              default-expand-all
            />
          </el-form-item>
        </el-form>
      </template>

      <template #footer>
        <!-- <el-button @click="fn1">设置 张三-1 被选中</el-button> -->
        <el-button v-if="handleType === 1" @click="handleAdd">添加</el-button>
        <el-button v-else @click="handleEditConfirm">更新</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import {
  getManagerList,
  delManager,
  addManager,
  updateManager,
} from "@/api/user.js";
import { routes } from "@/router";
import { getChildrenByName, isIncludes } from "@/utils";

export default {
  name: "manager-list",

  data() {
    return {
      // 存放数据
      tableData: [],
      // 当前页码
      page: 1,
      // 每页显示条数
      pageSize: 10,
      // 是否显示抽屉
      showDrawer: false,

      // 表单数据
      formData: {
        // 账号名
        adminname: "",
        // 密码
        password: "",
        // 角色 1 - 管理员  2 - 超级管理员
        role: "",
        // 勾选的路由的名字 ['home', 'banner-list']
        checkedKeys: [],
      },
      // 表单规则
      formRules: {
        adminname: [{ required: true, message: "请填写" }],
        password: [{ required: true, message: "请填写" }],
        role: [{ required: true, message: "请填写" }],
        checkedKeys: [{ required: true, message: "请填写" }],
      },

      // 抽屉操作类型，1 - 添加  2 - 编辑
      handleType: 1,

      // 树形组件的数据
      treeData: [],

      defaultProps: {
        // children 就是每一个节点的子节点是什么字段，默认值就是 children
        children: "children",
        // label 就是每一个节点用来展示文案的字段，默认值就是 label
        label: "label",
      },
    };
  },

  computed: {
    displayTableData() {
      return this.tableData.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
  },

  methods: {
    /**
     * 初始化 treeData 的数据
     */
    initTreeData() {
      const tmp = routes.filter((item) => !item.hidden);
      this.treeData = tmp;
    },

    /**
     * 获取数据
     */
    fetchData() {
      getManagerList().then((data) => {
        this.tableData = data.data;
      });
    },

    /**
     * 删除
     */
    handleDelete(row) {
      console.log(row);

      delManager(row.adminid).then((data) => {
        console.log("删除成功");
        // 重新获取下列表数据
        this.fetchData();
      });
    },

    /**
     * 表格编辑按钮
     */
    handleEdit(row) {
      // 根据当前 row.adminid 调用接口获取到当前用户的详情数据, 我们这儿 row 中就全部都有，不需要
      // console.log(row);

      // 编辑模式
      this.handleType = 2;
      // 打开抽屉
      this.showDrawer = true;

      // 数据填充
      this.formData.adminname = row.adminname;
      this.formData.password = row.password;
      this.formData.role = row.role + "";
      // 上面三个字段，是跟页面做了双向数据绑定的，所以是OK的。
      // 这里的 checkedKeys 需要我们通过别的方式去勾选。
      this.formData.checkedKeys = row.checkedKeys;

      this.$nextTick(() => {
        let roles = row.checkedKeys;

        let arr = roles.filter((role) => {
          let children = getChildrenByName(routes, role);
          if (children.length) {
            return isIncludes(children, roles);
          } else {
            return true;
          }
        });

        this.$refs.treeRef.setCheckedKeys(arr);
      });

      console.log(this.formData, row);
    },

    /**
     * 添加管理员按钮
     */
    handleAddBefore() {
      // 添加模式
      this.handleType = 1;
      // 打开抽屉
      this.showDrawer = true;

      // 重置表单数据
      this.formData.adminname = "";
      this.formData.password = "";
      this.formData.role = "";
      this.formData.checkedKeys = [];

      this.$nextTick(() => {
        this.$refs.treeRef.setCheckedKeys([]);
      });
    },

    /**
     * 更新操作
     */
    async handleEditConfirm() {
      try {
        // 获取到勾选的权限 keys 集合，赋值给 formData.checkedKeys
        const list1 = this.$refs.treeRef.getCheckedKeys();
        const list2 = this.$refs.treeRef.getHalfCheckedKeys();
        this.formData.checkedKeys = [...list1, ...list2];

        // 表单校验
        await this.$refs.formRef.validate();

        // 调用接口
        updateManager({
          adminname: this.formData.adminname,
          role: this.formData.role,
          checkedKeys: this.formData.checkedKeys,
        }).then((data) => {
          console.log("更新成功");
          // 关闭抽屉
          this.showDrawer = false;
          // 重新获取下数据
          this.fetchData();
        });
      } catch (error) {
        console.error(error);
      }
    },

    /**
     * 添加管理员
     */
    handleAdd1() {
      // console.log(this.formData);

      // node-key 设置了 name, 这里获取到的就是选中的节点的 name 集合
      const list1 = this.$refs.treeRef.getCheckedKeys();
      // getCheckedKeys 默认是返回当前选中的接口的 key
      // 如果当前节点是个唯一的子节点，那么它的父节点也会返回
      // ['banner-add', 'manager', 'manager-list'] 这个数据格式不是我们所需要的，后续不好处理左侧菜单的显示，需要的是，如果某个子节点被选中，父节点已需要获取
      // ['banner', 'banner-add', 'manager', 'manager-list']
      const list2 = this.$refs.treeRef.getHalfCheckedKeys();

      // const newList = list1.concat(list2);
      const newList = [...list1, ...list2];

      // addManager({})
    },

    async handleAdd() {
      try {
        // 获取到勾选的权限 keys 集合，赋值给 formData.checkedKeys
        const list1 = this.$refs.treeRef.getCheckedKeys();
        const list2 = this.$refs.treeRef.getHalfCheckedKeys();
        this.formData.checkedKeys = [...list1, ...list2];

        await this.$refs.formRef.validate();

        // 调用接口
        addManager(this.formData).then((data) => {
          console.log("添加成功");
          // 关闭抽屉
          this.showDrawer = false;
          // 重新获取下数据
          this.fetchData();
        });
      } catch (error) {
        console.error(error);
      }
    },

    // fn1() {
    //   this.$refs.treeRef.setCheckedKeys(["banner-list"]);
    // },

    /**
     * 抽屉关闭前的回调函数
     *  done - 它也是一个函数，这个函数调用才会关闭抽屉
     */
    // onClose(done) {
    //   console.log(done);
    //   const isOk = window.confirm("你确定要关闭吗");
    //   if (isOk) {
    //     done();
    //   }
    // },
  },

  mounted() {
    this.initTreeData();
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.page-manager-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .header,
  .footer {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }

  .el-table {
    flex: 1;
  }
}
</style>
